<script setup>
import * as echarts from 'echarts'
import { NNumberAnimation } from 'naive-ui'
import china from '@/assets/json/china.json'
import icon from '@/assets/json/icon.json'
import emitter from '@/utils/pubsub.js'

const { proxy } = getCurrentInstance()

const points = [
  // 散点图数据
  {
    name: '乌鲁木齐',
    value: [87.578909, 43.870946],
    itemStyle: { color: '#39C9FF' }
  }, // 新疆
  { name: '西宁', value: [94.2402, 34.4199], itemStyle: { color: '#39C9FF' } }, // 西宁
  { name: '拉萨', value: [90.7695, 31.8846], itemStyle: { color: '#39C9FF' } }, // 拉萨
  { name: '成都', value: [103.056452, 31.251696], itemStyle: { color: '#39C9FF' } }, // 成都
  { name: '兰州', value: [103.826777, 36.060634], itemStyle: { color: '#39C9FF' } }, // 兰州
  { name: '昆明', value: [102.459868, 24.312077], itemStyle: { color: '#39C9FF' } }, // 昆明
  { name: '南宁', value: [108.45716, 22.866605], itemStyle: { color: '#39C9FF' } }, // 南宁
  { name: '哈尔滨', value: [126.53761, 45.842517], itemStyle: { color: '#39C9FF' } }, // 哈尔滨
  { name: '沈阳', value: [123.545881, 41.712651], itemStyle: { color: '#39C9FF' } }, // 沈阳
  { name: '福州', value: [119.296194, 26.101082], itemStyle: { color: '#39C9FF' } }, // 福州
  { name: '杭州', value: [120.241972, 30.235992], itemStyle: { color: '#39C9FF' } }, // 杭州
  { name: '上海', value: [121.542723, 31.219926], itemStyle: { color: '#39C9FF' } }, // 上海
  { name: '南京', value: [119.563175, 32.473305], itemStyle: { color: '#39C9FF' } }, // 南京
  { name: '太原', value: [112.578781, 38.813948], itemStyle: { color: '#39C9FF' } }, // 太原
  { name: '北京', value: [116.407387, 39.904179], itemStyle: { color: '#39C9FF' } }, // 北京
  { name: '广州', value: [113.452047, 23.582169], itemStyle: { color: '#39C9FF' } }, // 广东
  { name: '济南', value: [117.137224, 36.627303], itemStyle: { color: '#39C9FF' } }, // 济南
  { name: '武汉', value: [112.147848, 30.342372], itemStyle: { color: '#39C9FF' } } // 武汉
]

const linesData = [
  // 线条数据
  {
    coords: [
      [112.147848, 30.342372],
      [87.578909, 43.870946]
    ],
    lineStyle: {
      curveness: -0.3
    },
    effect: {
      show: true,
      period: 10,
      trailLength: 0,
      symbolSize: 10,
      symbol: planePath
    }
  }, // 武汉->新疆
  {
    coords: [
      [112.147848, 30.342372],
      [94.2402, 34.4199]
    ],
    lineStyle: { curveness: -0.2 },
    effect: {
      period: 5
    }
  }, // 武汉->西宁
  {
    coords: [
      [112.147848, 30.342372],
      [103.826777, 36.060634]
    ],
    lineStyle: { curveness: -0.2 },
    effect: { period: 4 }
  }, // 武汉->兰州
  {
    coords: [
      [112.147848, 30.342372],
      [90.7695, 31.8846]
    ],
    lineStyle: { curveness: -0.2 },
    effect: { period: 6 }
  }, // 武汉->拉萨
  {
    coords: [
      [112.147848, 30.342372],
      [103.056452, 31.251696]
    ],
    lineStyle: { curveness: -0.1 },
    effect: { period: 3.5 }
  }, // 武汉->成都
  {
    coords: [
      [112.147848, 30.342372],
      [102.459868, 24.312077]
    ],
    lineStyle: { curveness: -0.2 },
    effect: { period: 4.5 }
  }, // 武汉->昆明
  {
    coords: [
      [112.147848, 30.342372],
      [108.45716, 22.866605]
    ],
    lineStyle: { curveness: -0.1 },
    effect: { period: 4 }
  }, // 武汉->南宁
  {
    coords: [
      [112.147848, 30.342372],
      [113.452047, 23.582169]
    ],
    lineStyle: { curveness: -0.1 },
    effect: { period: 3.6 }
  }, // 武汉->广州
  {
    coords: [
      [112.147848, 30.342372],
      [119.296194, 26.101082]
    ],
    lineStyle: { curveness: 0.1 },
    effect: { period: 4.1 }
  }, // 武汉->福州
  {
    coords: [
      [112.147848, 30.342372],
      [120.241972, 30.235992]
    ],
    lineStyle: { curveness: 0.2 },
    effect: { period: 3 }
  }, // 武汉->杭州
  {
    coords: [
      [112.147848, 30.342372],
      [121.542723, 31.219926]
    ],
    lineStyle: { curveness: 0.1 },
    effect: { period: 4.2 }
  }, // 武汉->上海
  {
    coords: [
      [112.147848, 30.342372],
      [119.563175, 32.473305]
    ],
    lineStyle: { curveness: 0.3 },
    effect: { period: 3.9 }
  }, // 武汉->南京
  {
    coords: [
      [112.147848, 30.342372],
      [117.137224, 36.627303]
    ],
    lineStyle: { curveness: 0.1 },
    effect: { period: 3.8 }
  }, // 武汉->济南
  {
    coords: [
      [112.147848, 30.342372],
      [123.545881, 41.712651]
    ],
    lineStyle: { curveness: 0.3 },
    effect: { period: 8 }
  }, // 武汉->沈阳
  {
    coords: [
      [112.147848, 30.342372],
      [126.53761, 45.842517]
    ],
    lineStyle: { curveness: 0.4 },
    effect: { period: 9 }
  }, // 武汉->哈尔滨
  {
    coords: [
      [112.147848, 30.342372],
      [112.578781, 38.813948]
    ],
    lineStyle: { curveness: 0.2 },
    effect: { period: 6 }
  }, // 武汉->太原
  {
    coords: [
      [112.147848, 30.342372],
      [116.407387, 39.904179]
    ],
    lineStyle: { curveness: 0.2 },
    effect: { period: 7 }
  } // 武汉->北京
]
const planePath =
  'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
const mapRef = ref(null)
function initCharts() {
  if (!mapRef) {
    return
  } 
  const charts = echarts.init(mapRef.value)
  const option = {
    geo: {
      // 地图配置
      map: 'china',
      label: {
        // 图形上的文本标签
        show: true,
        color: '#777'
      },
      itemStyle: {
        // 地图区域的样式设置
        borderColor: '#FFF',
        borderWidth: 1.2,
        areaColor: '#EEE'
      },
      emphasis: {
        disabled: true
      },
      regions: [
        {
          name: '南海诸岛',
          itemStyle: {
            opacity: 0
          },
          label: {
            show: false
          }
        },
        {
          name: '北京',
          label: {
            show: false
          }
        },
        {
          name: '上海',
          label: {
            show: false
          }
        },
        {
          name: '广州',
          label: {
            show: false
          }
        },
        {
          name: '南京',
          label: {
            show: false
          }
        }
      ]
    },
    series: [
      {
        // 散点系列数据
        type: 'effectScatter', // 带有涟漪特效动画的散点（气泡）图
        coordinateSystem: 'geo', // 该系列使用的坐标系:地理坐标系
        // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
        effectType: 'ripple',
        // 配置何时显示特效。可选'render'和'emphasis' 。
        showEffectOn: 'render',
        rippleEffect: {
          // 涟漪特效相关配置。
          period: 10, // 动画的周期，秒数。
          scale: 1, // 动画中波纹的最大缩放比例。
          // 波纹的绘制方式，可选 'stroke' 和 'fill'。
          brushType: 'fill'
        },
        // symbol: 'rect',
        symbolSize: 7,
        // zlevel: 10, // 所有图形的 zlevel 值。
        data: points,
        markPoint: {
          symbol: icon.location,
          symbolSize: [17, 22],
          label: {
            show: true,
            position: 'right',
            width: 36,
            height: 23,
            color: '#fff',
            distance: 20,
            align: 'center',
            lineHeight: 23,
            backgroundColor: {
              image: 'https://oss.byteox.com/byteox/k9hngyds/50/KVfbtrnMvh16eNjzLTVk.png'
            },
            fontSize: 14,
            // offset: [30, 0],
            formatter: '{b}'
            // with: 34,
            // height: 24
          },
          data: [
            { name: '武汉', coord: [112.147848, 30.342372], symbolOffset: [0, -10] },
            { name: '上海', coord: [121.542723, 31.219926], symbolOffset: [0, -10] },
            { name: '广州', coord: [113.452047, 23.582169], symbolOffset: [0, -10] },
            { name: '南京', coord: [119.563175, 32.873305], symbolOffset: [0, -10] },
            { name: '北京', coord: [116.407387, 39.904179], symbolOffset: [0, -10] }
          ],
          z: 999
        }
      },
      {
        // 线条系列数据
        type: 'lines',
        // zlevel: 0,
        z: 0,
        // symbol: ['none', 'arrow'], // 标记的图形: 箭头
        symbol: ['none', 'none'], // 标记的图形: 箭头
        symbolSize: 10, // 标记的大小
        effect: {
          // 线条特效的配置
          show: true,
          period: 4, // 特效动画的时间，单位s
          trailLength: 0, // 特效尾迹的长度。取值[0,1]值越大，尾迹越重
          // trailLength: 0.3, // 特效尾迹的长度。取值[0,1]值越大，尾迹越重
          symbol: planePath, // 特效图形的标记 可选'circle'等
          // symbol: 'crcle', // 特效图形的标记 可选'circle'等
          symbolSize: 10 // 特效标记的大小
          // symbolSize: 6, // 特效标记的大小
          // roundTrip: true
        },
        lineStyle: {
          // 线条样式
          // color: '#93EBF8',
          width: 2, // 线条宽度
          opacity: 0.6, // 尾迹线条透明度
          curveness: 0.2, // 尾迹线条曲直度
          color: {
            type: 'linear',
            x: 1,
            y: 1,
            r: 1,
            colorStops: [
              {
                offset: 0,
                color: '#3191FF' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#35EEFC' // 100% 处的颜色
              }
            ]
          }
        },
        data: linesData
      }
    ]
  }
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap('china', china)
  charts.setOption(option)
}
onMounted(() => {
  initCharts()
  emitter.on('observe-view', (entry) => {
    if(entry.target.id === 'cityMapRef') {
      listenView(entry)
    }
  })
})



function listenView(entry) {
  if (entry.isIntersecting) {
    proxy.$refs.khRef?.play()
    proxy.$refs.hyRef?.play()
    proxy.$refs.fyRef?.play()
    proxy.$refs.jyRef?.play()
  }
}

</script>

<template>
  <section class="w-full relative mt-220px">
    <h2 class="text-size-44px leading-62px text-center">安全稳定、客户遍布全国各地</h2>
    <div id="cityMapRef" class="w-1200px flex justify-between mt-75px mx-auto observe-view">
      <div class="w-158px">
        <div class="mt-60px">
          <div class="flex items-end h-63px">
            <div class="text-size-50px font-bold text-hex-0A87F8"><NNumberAnimation ref="khRef" :from="0" :to="10000" /></div>
            <div class="font-semibold text-size-30px">+</div>
          </div>
          <p class="text-hex-777 text-size-24px mt-5px">客户数</p>
        </div>
        <div class="mt-60px">
          <div class="flex items-end h-63px">
            <div class="text-size-50px font-bold text-hex-0A87F8"><NNumberAnimation ref="hyRef" :from="0" :to="600" /></div>
            <div class="font-semibold text-size-30px">万+</div>
          </div>
          <p class="text-hex-777 text-size-24px mt-5px">合约数</p>
        </div>
        <div class="mt-60px">
          <div class="flex items-end h-63px">
            <div class="text-size-50px font-bold text-hex-0A87F8"><NNumberAnimation ref="fyRef" :from="0" :to="200" /></div>
            <div class="font-semibold text-size-30px">万+</div>
          </div>
          <p class="text-hex-777 text-size-24px mt-5px">房源数</p>
        </div>
        <div class="mt-60px">
          <div class="flex items-end h-63px">
            <div class="text-size-50px font-bold text-hex-0A87F8"><NNumberAnimation ref="jyRef" :from="0" :to="100" /></div>
            <div class="font-semibold text-size-30px">亿+</div>
          </div>
          <p class="text-hex-777 text-size-24px mt-5px">交易额</p>
        </div>
      </div>
      <div class="flex-1 h-694px relative">
        <!-- 城市地图 -->
        <div ref="mapRef" class="w-1200px h-1000px absolute" style="top: -150px;"></div>
      </div>
    </div>
    <div class="map-bg"></div>
  </section>
</template>

<style scoped>
.map-bg {
  position: absolute;
  width: 100vw;
  height: 2098px;
  left: 0;
  top: 48px;
  z-index: -1;
  background: url('/public/images/home/map/map-bg.png') no-repeat 0 0;
  background-size: 100% 100%;
}
</style>
